<!--
 * @Author: wangshuguang
 * @Date: 2022-03-30 14:33:47
 * @LastEditTime: 2022-04-15 15:10:45
 * @LastEditors: wangshuguang
 * @Description: 交易中心折线图
-->

<template>
  <div ref="chars" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    title: {
      type: String,
      default: '分布图'
    },
    subTitle: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    baseData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      chart: null
    }
  },
  watch: {
    baseData: {
      handler() {
        this.initChart()
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // 初始化
      if (!this.chart) {
        this.chart = this.$echarts.init(this.$refs['chars'])
      }

      console.log(999, this.chart)
      // 数据
      // 配置
      const obj = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const { marker, data } = params
            return `${marker} ${data.name} ${data.ratio}`
          }
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            // avoidLabelOverlap: false,
            data: this.baseData.map(item => {
              return {
                value: item.money,
                name: item.name,
                ratio: item.ratio
              }
            })
          }
        ]
      }
      this.chart.setOption(obj)
    }

    /**
       * 数据组
       */
    /**
       * 按钮组
       */
    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  // .chart {
  // background-color: red;
  // }
</style>
